<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SUOYUEの时间轴</title>

  <link rel="shortcut icon" th:href="@{/images/favicon.ico}" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
  <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">
  <link rel="stylesheet" href="../static/css/timeline.css" th:href="@{/css/timeline.css}">
</head>
<body>

<!--导航-->
<nav class="gird-header">
  <div class="ui container">
    <div class="ui inverted secondary stackable menu">
      <h2 class="ui olive header item" style="font-family: STSong">SUOYUEのBLOG</h2>
      <a href="#" th:href="@{/}" class="m-item item m-mobile-hide"><i class="home icon"></i><span th:text="#{index.home}">首页</span></a>
      <a href="#" th:href="@{/types/-1}" class="m-item item m-mobile-hide"><i class="clone outline icon"></i><span th:text="#{index.type}">分类</span></a>
      <a href="#" th:href="@{/archives}" class="active m-item item m-mobile-hide"><i class="clock icon"></i><span th:text="#{index.time}">时间轴</span></a>
      <a href="#" th:href="@{/message}" class="m-item item m-mobile-hide"><i class="book icon"></i><span th:text="#{index.messages}">留言板</span></a>
      <a href="#" th:href="@{/echarts}" class="m-item item m-mobile-hide"><i class="table icon"></i><span th:text="#{index.echarts}">数据统计</span></a>
      <a href="#" th:href="@{/friends}" class="m-item item m-mobile-hide"><i class="pencil alternate icon"></i><span th:text="#{index.links}">友链</span></a>
      <a href="#" th:href="@{/about}" class="m-item item m-mobile-hide"><i class="info icon"></i><span th:text="#{index.me}">关于我</span></a>
      <div class="right m-item item m-mobile-hide">
        <form name="search" action="#" th:action="@{/search}" method="post" target="_blank">
          <div class="ui icon transparent input m-margin-tb-tiny" style="color: white">
            <input style="color: white" type="text" name="query" placeholder="Search....">
            <i onclick="document.forms['search'].submit()" class="search link icon"></i>
          </div>
        </form>
      </div>
    </div>
  </div>
  <!--手机端收起导航栏-->
  <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
    <i class="sidebar icon"></i>
  </a>
</nav>

<!--时间轴内容-->
<div class="doc-container m-padded-tb-massivex m-opacity" id="doc-container">
  <th:block>
    <section class="timeline">
      <ul>
        <li class="in-view" th:each="blog: ${blogs}">
          <div>
            <time th:text="${#dates.format(blog.updateTime,'yyyy-MM-dd')}">2020-09-27</time>
            <div class="scientist">
              <a href="" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank">
                <h3 class="state" style="text-align:center;font-size: 16px;color: #000;" th:text="${blog.title}">IntelliJ IDEA 2020.2安装破解（附jdk8安装及环境配置）</h3>
              </a>
            </div>
          </div>
        </li>
      </ul>
    </section>
  </th:block>
</div>


<!--底部栏-->
<footer class="ui inverted vertical segment m-padded-tb-massive m-opacity" th:replace="_fragments :: footer">

</footer>
<!--通用script：使用div标签或thymeleaf模板的th:block-->
<th:block th:replace="_fragments :: script">
</th:block>

<script src="../static/lib/timeline/timeline.js" th:src="@{/lib/timeline/timeline.js}"></script>

<script>
  $('.menu.toggle').click(function () {
    $('.m-item').toggleClass('m-mobile-hide');
  });
</script>

</body>
</html>